<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>
            <span>姓名:</span>
            <input type="text" v-model="name">
        </div>
        <div>
            <span>年龄:</span>
            <input type="number" v-model="age">
        </div>
        <div>
            <span>性别:</span>
            <select v-model="gender">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div>
            <button @click="add">添加/修改</button>
        </div>
        <div>
            <table border="1" cellpadding="10" cellspacing="0">
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item, index) in student" :key="index">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.gender}}</td>
                    <td>
                        <button @click="del(index)">删除</button>
                        <button @click="Edit(item,index)">编辑</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                id:1,
                flag: false,
                name: '',
                age: '',
                gender: '男',
                student: [
                    { name: '樊帅康', age: 18, gender: '女' },
                    { name: '刘子麟', age: 88, gender: '男' },
                    { name: '朱益华', age: 8, gender: '男' }
                ]
            },
            methods: {
                // 添加功能
                add(index) {
                    // pankong
                    if (this.name === '' || this.age === 0 || this.age === '') {
                        return alert('请输入正确的名字和年龄')
                    }
                    // kaiguan
                    if (this.falg) {
                        this.student.splice(this.id, 1, { name: this.name, age: this.age, gender: this.gender })
                        this.falg = false
                        this.name = ''
                        this.age = ''
                        this.id = 1

                    } else {
                        this.student.push({ name: this.name, age: this.age, gender: this.gender })
                        this.name = ''
                        this.age = ''
                        this.id = 1
                    }
                },
                // 编辑功能
                Edit(item, index) {
                    this.falg=true
                    this.name = item.name
                    this.age = item.age
                    this.gender = item.gender
                    this.id = index
                },
                // 删除函数
                del(index){
                    this.student.splice(index,1)
                }
            }
        })
    </script>
</body>

</html>